<template>
    <view class="warp">
        <canvas canvas-id="hoCanvas" class="canvas" :style="{ height: lineBgHeight + 'px' }"></canvas>
        
        <button v-if="btnshow" @click="saveImageToAlbum">保存到相册</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            user: [],
            btnshow: false,
            show: false,
            img: "../../static/img/test.png",
            qr: "",
            postUrl: "",
            canvasW: "",
            canvasH: "",
            _rpx: "",
            ratio: "",
            windowWidth: "",
            windowHeight: "",
            cW: "",
            cH: "",

            img_w: "",
            img_h: "",

            user_name: "",
            img3: "",
            lineBgHeight: 0,
            sysWidth: "",
            sysHeight: "",
            imageH: "",
            logoImg:'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17214648124271342.png',
        };
    },
    watch: {
        qr: {
            handler(val) {
                console.log(val);
                // this.saveImg();
            },
            immediate: true,
            deep: true,
        },
    },
    async onLoad() {
        uni.getSystemInfo({
            success: (res) => {
                this.cW = res.windowWidth;
                this.cH = res.windowHeight;
            },
        });

        this.img3 =
            "https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1718337478173550.png";
    },
    async onReady() {
        await this.getUserInfo();

        await this.CreateShareQR();

        await this.saveImg();
    },
    methods: {
        async getUserInfo() {
            let u = uni.getStorageSync("user");
            console.log(u.UserID);
            let res = await this.$api.post("User/GetUserInfo", {
                ID: u.UserID,
            });

            this.user = res.data;

            this.img = this.user.UserImgs;
            this.user_name = this.user.Name;

            let that = this;
            wx.getImageInfo({
                src: this.img,
                success: function (res) {
                    that.img_w = res.width;
                    that.img_w = res.height;

                    that.ratio = res.width / res.height;
                },
                fail: (res) => { },
            });
        },

        async CreateShareQR() {
            let res = await this.$api.post("Action/CreateShareQR", {
                Page: "pages/tab/home",
            });
            console.log("qr");
            console.log(res);
            this.qr = res.data;
        },

        saveImg() {
            var that = this;
           
            let promise4 = new Promise(function (resolve, reject) {
                wx.getImageInfo({
                    src: that.logoImg,
                    success: function (res) {
                        console.log("promise4--", res);
                        resolve(res);
                    },
                    fail: (res) => {
                        reject(res);
                        console.log("promise3错误");
                        console.log(res);
                    },
                });
            });

            // wx.getSystemInfo({
            // 	success: (res) => {
            // 		//that._rpx = res.windowWidth / 375;
            // 		that.ratio = res.windowWidth / res.windowHeight
            // 		// this.windowWidth = res.windowWidth
            // 		// this.windowHeight = res.windowHeight
            // 	},
            // })
            const query = uni.createSelectorQuery();
            query
                .select(".canvas")
                .fields(
                    {
                        node: true, //指定要获取的属性，这里设置为size: true表示要获取尺寸信息。
                        size: true, //在回调函数(res) => {...}中处理查询结果。回调函数会接收一个res参数，其中包含了查询的结果信息。
                    },
                    (res) => {
                        const dpr = wx.getWindowInfo().pixelRatio;
                        wx.getSystemInfo({
                            success: (res) => {
                                this.sysWidth = res.screenWidth;
                                this.sysHeight = res.screenHeight;
                            },
                        });
                        // 在回调函数中，通过res.width和res.height获取到查询元素的宽度和高度。
                        that.canvasW = 128;
                        that.canvasH = 80;
                        that.lineBgHeight = that.canvasH;
                        // 绘制图片：图片居中显示在 canvas 中
                        Promise.all([promise4])
                            .then((res) => {
                                that.show = true;
                                wx.showLoading({
                                    title: "海报图片生成中...",
                                    icon: "loading",
                                    duration: 1000,
                                });

                                /* 图片获取成功才执行后续代码 */
                                var canvas = wx.createCanvasContext("hoCanvas");
                                console.log(res[0],'ddddd');
                                canvas.drawImage(
                                    res[0].path,
                                    0,
                                    0,
                                    128,
                                    40
                                );
                                //顶端矩形蒙版
                                canvas.font = "bold 18px Arial";
                                canvas.setFillStyle("#efefef");
                                canvas.setStrokeStyle("#efefef");
                                canvas.textAlign = 'left'
                                let userName = '挥卡号:66666'
                                canvas.fillText(userName, 0, 66);
                                canvas.draw();
                                setTimeout(function () {
                                    wx.canvasToTempFilePath({
                                        x: 0,
                                        y: 0,
                                        width: that.canvasW,
                                        height: that.canvasH,
                                        destWidth: that.canvasW,
                                        destHeight: that.canvasH,
                                        canvasId: "hoCanvas",
                                        success: function (res) {
                                            that.postUrl = res.tempFilePath;
                                            // that.saveImageToAlbum();
                                            that.btnshow = true;
                                            wx.hideLoading();
                                        },
                                        fail: function (res) { },
                                    });
                                }, 500);
                            })
                            .catch((err) => {
                                console.dir("出错了", err);
                                console.log(err);
                                uni.showModal({
                                    title: "异常错误",
                                    content: "图片生成失败!!!\n[QRError:Damaged QR code]",
                                    showCancel: false,
                                    success: (res) => {
                                        if (res.confirm) uni.navigateBack();
                                    },
                                });
                            });
                    }
                )
                .exec();
        },

        saveImageToAlbum: function () {
            var that = this;
            //将图片保存到相册
            wx.saveImageToPhotosAlbum({
                filePath: that.postUrl,
                success(res) {
                    wx.showModal({
                        title: "保存成功",
                        content: "图片成功保存到相册了，快去分享朋友圈吧",
                        showCancel: false,
                        confirmText: "好的",
                        confirmColor: "#818FFB",
                        success: function (res) {
                            if (res.confirm) {
                            }
                            // that.hideShareImg()
                        },
                    });
                },
            });
        },
    },
};
</script>

<style lang="scss">
page {
    background: linear-gradient(to bottom, #9990fe, #8186fe);
}

.warp {
    width: 100%;
    //   height: 100vh;
    box-sizing: border-box;
    padding-bottom: 160rpx;
}

.canvas {
    width: 128px;
    height: 80px;
    margin: 50rpx auto;
    margin-bottom: 0;
    box-sizing: border-box;
}

.height70 {
    height: 70vh;
}

.height100 {
    height: 100vh;
}

.height64 {
    height: 62vh;
}

button {
    position: fixed;
    left: 50%;
    bottom: 80rpx;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #706eee;
    border-radius: 16rpx;
    width: 90vw;
    margin: 0 auto;
}

</style>